<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import { getStoredUser } from '../api/auth'
import { getKnowledgeList } from '../api/knowledge'
import { getUserList } from '../api/user'
import { ElMessage } from 'element-plus'
// 改为动态导入McpManager组件
const McpManager = defineAsyncComponent(() => import('../components/McpManager.vue'))
// 导入用户管理组件
import UserManager from '../components/user/UserManager.vue'
// 导入知识库管理组件
import KnowledgeManager from '../components/knowledge/KnowledgeManager.vue'
// 导入智能体角色管理组件
import AgentRoleManager from '../components/AgentRoleManager.vue'
// 导入模型提供商管理组件
import AgentModelProviderManager from '../components/AgentModelProviderManager.vue'

const router = useRouter()
const user = ref(getStoredUser())
const activeMenu = ref('dashboard')

// 统计数据
const knowledgeTotal = ref(0)
const userTotal = ref(0)
const messageTotal = ref(1254) // 假数据，实际应该从API获取
const activeUsers = ref(425) // 假数据，实际应该从API获取
const loading = ref(false) // 添加加载状态

// 页面初始化
onMounted(async () => {
  // 检查用户权限
  if (!user.value || (user.value.role !== 1 && user.value.role !== 2)) {
    ElMessage.error('您没有权限访问该页面')
    router.push('/')
    return
  }

  loading.value = true
  try {
    // 获取知识库总数
    const knowledgeRes = await getKnowledgeList(1, 1)
    if (knowledgeRes.data) {
      knowledgeTotal.value = knowledgeRes.data.total
    }
    
    // 获取用户总数
    const userRes = await getUserList({ page: 1, pageSize: 1 })
    if (userRes.data) {
      userTotal.value = userRes.data.total
    }
  } catch (error) {
    console.error('Failed to fetch dashboard data:', error)
    ElMessage.warning('获取统计数据失败，请稍后再试')
  } finally {
    loading.value = false
  }
})

// 菜单处理
const handleMenuClick = (menu: string) => {
  activeMenu.value = menu
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  ElMessage.success('退出登录成功')
  router.push('/')
}
</script>

<template>
  <div class="admin-app">
    <!-- 侧边导航 -->
    <nav class="admin-sidebar">
      <div class="sidebar-brand">
        <img src="../assets/buding-logo.svg" alt="布丁AI" class="brand-logo" />
        <span class="brand-text">布丁AI后台</span>
      </div>
      
      <div class="nav-user-profile">
        <div class="user-avatar">{{ user?.nickname?.[0] || user?.username?.[0] || 'U' }}</div>
        <div class="user-info">
          <div class="user-name">{{ user?.nickname || user?.username }}</div>
          <div class="user-role">{{ user?.role === 1 ? '超级管理员' : user?.role === 2 ? '管理员' : '用户' }}</div>
        </div>
      </div>
      
      <div class="nav-divider"></div>
      
      <div class="nav-menu">
        <div 
          class="nav-item" 
          :class="{ active: activeMenu === 'dashboard' }"
          @click="handleMenuClick('dashboard')"
        >
          <i class="nav-icon el-icon-monitor"></i>
          <span class="nav-text">控制面板</span>
        </div>
        
        <div 
          class="nav-item" 
          :class="{ active: activeMenu === 'users' }"
          @click="handleMenuClick('users')"
        >
          <i class="nav-icon el-icon-user"></i>
          <span class="nav-text">用户管理</span>
        </div>
        
        <div class="nav-item">
          <i class="nav-icon el-icon-data-analysis"></i>
          <span class="nav-text">数据统计</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: activeMenu === 'knowledge' }"
          @click="handleMenuClick('knowledge')"
        >
          <i class="nav-icon el-icon-notebook-1"></i>
          <span class="nav-text">知识库管理</span>
        </div>
        
        <div 
          class="nav-item"
          :class="{ active: activeMenu === 'mcp' }"
          @click="handleMenuClick('mcp')"
        >
          <i class="nav-icon el-icon-s-tools"></i>
          <span class="nav-text">MCP管理</span>
        </div>
        
        <div 
          class="nav-item" 
          :class="{ active: activeMenu === 'agentRole' }"
          @click="handleMenuClick('agentRole')"
        >
          <i class="nav-icon el-icon-user"></i>
          <span class="nav-text">智能体角色</span>
        </div>
        
        <div 
          class="nav-item" 
          :class="{ active: activeMenu === 'modelProvider' }"
          @click="handleMenuClick('modelProvider')"
        >
          <i class="nav-icon el-icon-cpu"></i>
          <span class="nav-text">模型提供商</span>
        </div>
        
        <div class="nav-item">
          <i class="nav-icon el-icon-setting"></i>
          <span class="nav-text">系统设置</span>
        </div>
      </div>
      
      <div class="nav-footer">
        <button class="nav-item logout-button" @click="handleLogout">
          <i class="nav-icon el-icon-switch-button"></i>
          <span class="nav-text">退出登录</span>
        </button>
      </div>
    </nav>
    
    <!-- 主内容区 -->
    <main class="admin-main">
      <!-- 顶部导航 -->
      <header class="admin-header">
        <div class="header-title">
          <h1>{{ 
            activeMenu === 'dashboard' 
              ? '控制面板' 
              : activeMenu === 'users' 
                ? '用户管理' 
                : activeMenu === 'knowledge' 
                  ? '知识库管理' 
                  : activeMenu === 'mcp'
                    ? 'MCP管理'
                    : activeMenu === 'agentRole'
                      ? '智能体角色'
                      : activeMenu === 'modelProvider'
                        ? '模型提供商管理'
                        : '控制面板'
          }}</h1>
          <p class="header-subtitle">欢迎回来，今天是 {{ new Date().toLocaleDateString() }}</p>
        </div>
        
        <div class="header-actions">
          <button class="btn-icon" title="通知">
            <i class="el-icon-bell"></i>
          </button>
          <button class="btn-icon" title="帮助">
            <i class="el-icon-question"></i>
          </button>
          <button class="btn-icon" title="设置">
            <i class="el-icon-setting"></i>
          </button>
        </div>
      </header>
      
      <!-- 控制面板 -->
      <div v-if="activeMenu === 'dashboard'" class="dashboard-content">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner"></div>
          <p>加载数据中...</p>
        </div>
        
        <!-- 统计卡片 -->
        <div class="stats-row">
          <div class="stat-card stat-users">
            <div class="stat-header">
              <h3 class="stat-title">用户总数</h3>
              <i class="stat-icon el-icon-user"></i>
            </div>
            <div class="stat-value">{{ userTotal }}</div>
            <div class="stat-footer">
              <span class="stat-change positive">+12%</span>
              <span class="stat-period">较上月</span>
            </div>
          </div>
          
          <div class="stat-card stat-messages">
            <div class="stat-header">
              <h3 class="stat-title">消息数量</h3>
              <i class="stat-icon el-icon-chat-dot-round"></i>
            </div>
            <div class="stat-value">{{ messageTotal }}</div>
            <div class="stat-footer">
              <span class="stat-change positive">+8%</span>
              <span class="stat-period">较上周</span>
            </div>
          </div>
          
          <div class="stat-card stat-active">
            <div class="stat-header">
              <h3 class="stat-title">活跃用户</h3>
              <i class="stat-icon el-icon-data-line"></i>
            </div>
            <div class="stat-value">{{ activeUsers }}</div>
            <div class="stat-footer">
              <span class="stat-change negative">-3%</span>
              <span class="stat-period">较昨日</span>
            </div>
          </div>
          
          <div class="stat-card stat-system">
            <div class="stat-header">
              <h3 class="stat-title">知识库条目</h3>
              <i class="stat-icon el-icon-notebook-1"></i>
            </div>
            <div class="stat-value">{{ knowledgeTotal }}</div>
            <div class="stat-footer">
              <span class="stat-status">知识库总条目数</span>
            </div>
          </div>
        </div>
        
        <!-- 公告卡片 -->
        <div class="content-row">
          <div class="content-card system-notice">
            <div class="card-header">
              <h3 class="card-title">系统公告</h3>
              <button class="btn-text">查看全部</button>
            </div>
            <div class="card-body">
              <p class="card-text">欢迎使用布丁AI管理后台，您可以在这里管理用户、查看系统状态和数据统计。</p>
            </div>
          </div>
          
          <div class="content-card quick-actions">
            <div class="card-header">
              <h3 class="card-title">快捷操作</h3>
            </div>
            <div class="card-body">
              <div class="quick-action-grid">
                <div class="quick-action-item" @click="handleMenuClick('users')">
                  <i class="action-icon el-icon-user"></i>
                  <span class="action-text">用户管理</span>
                </div>
                <div class="quick-action-item">
                  <i class="action-icon el-icon-setting"></i>
                  <span class="action-text">系统设置</span>
                </div>
                <div class="quick-action-item">
                  <i class="action-icon el-icon-data-analysis"></i>
                  <span class="action-text">数据统计</span>
                </div>
                <div class="quick-action-item">
                  <i class="action-icon el-icon-document"></i>
                  <span class="action-text">日志查看</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 用户管理 -->
      <div v-if="activeMenu === 'users'" class="users-content">
        <UserManager />
      </div>

      <!-- 知识库管理 -->
      <div v-if="activeMenu === 'knowledge'" class="knowledge-content">
        <KnowledgeManager />
      </div>

      <!-- MCP管理 -->
      <div v-if="activeMenu === 'mcp'" class="mcp-content">
        <Suspense>
          <template #default>
            <McpManager />
          </template>
          <template #fallback>
            <div class="loading-container">
              <div class="loading-spinner"></div>
              <p>加载MCP管理组件中...</p>
            </div>
          </template>
        </Suspense>
      </div>

      <!-- 智能体角色管理 -->
      <div v-if="activeMenu === 'agentRole'" class="agent-role-content">
        <AgentRoleManager />
      </div>
      
      <!-- 模型提供商管理 -->
      <div v-if="activeMenu === 'modelProvider'" class="model-provider-content">
        <AgentModelProviderManager />
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
@use "sass:color";

:root {
  --primary-color: #3a7cfe;
  --primary-light: #ecf3ff;
  --success-color: #42b983;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --text-primary: #303133;
  --text-secondary: #606266;
  --text-light: #909399;
  --bg-color: #f5f7fa;
  --card-bg: #ffffff;
  --border-color: #ebeef5;
  --shadow-sm: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: all 0.3s ease;
}

/* 用户ID样式 */
.user-id {
  font-weight: 600;
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  min-width: 36px;
  text-align: center;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.admin-app {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-color);
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

/* 侧边栏样式 */
.admin-sidebar {
  width: 260px;
  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  box-shadow: var(--shadow-md);
  
  .sidebar-brand {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 12px;
    
    .brand-logo {
      height: 32px;
      filter: brightness(0) invert(1);
    }
    
    .brand-text {
      font-size: 18px;
      font-weight: 600;
      white-space: nowrap;
    }
  }
  
  .nav-user-profile {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    
    .user-avatar {
      width: 48px;
      height: 48px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
    }
    
    .user-info {
      .user-name {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 2px;
      }
      
      .user-role {
        font-size: 12px;
        opacity: 0.7;
      }
    }
  }
  
  .nav-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
  }
  
  .nav-menu {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    
    .nav-item {
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: var(--transition);
      border-left: 3px solid transparent;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
      
      &.active {
        background-color: rgba(255, 255, 255, 0.15);
        border-left-color: white;
      }
      
      .nav-icon {
        font-size: 18px;
      }
      
      .nav-text {
        font-size: 14px;
      }
    }
  }
  
  .nav-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    .logout-button {
      width: 100%;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border-radius: 8px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(245, 108, 108, 0.2);
        transform: translateY(-2px);
      }
      
      .nav-icon {
        font-size: 18px;
      }
      
      .nav-text {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}

/* 主内容区样式 */
.admin-main {
  flex: 1;
  margin-left: 260px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* 加载状态样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--primary-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
  }
  
  p {
    color: var(--text-secondary);
    font-size: 14px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
}

/* 顶部导航 */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  
  .header-title {
    h1 {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
    
    .header-subtitle {
      font-size: 14px;
      color: var(--text-light);
      margin-top: 5px;
    }
  }
  
  .header-actions {
    display: flex;
    gap: 10px;
    
    .btn-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--card-bg);
      border: none;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: var(--transition);
      color: var(--text-secondary);
      font-size: 16px;
      
      &:hover {
        background-color: var(--primary-light);
        color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
    }
  }
}

/* 控制面板 */
.dashboard-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  
  .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 0;
    
    .stat-card {
      background-color: var(--card-bg);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      padding: 20px;
      transition: var(--transition);
      border-top: 4px solid transparent;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
      }
      
      &.stat-users {
        border-top-color: var(--primary-color);
        .stat-icon { color: var(--primary-color); }
      }
      
      &.stat-messages {
        border-top-color: var(--success-color);
        .stat-icon { color: var(--success-color); }
      }
      
      &.stat-active {
        border-top-color: var(--warning-color);
        .stat-icon { color: var(--warning-color); }
      }
      
      &.stat-system {
        border-top-color: var(--text-light);
        .stat-icon { color: var(--text-light); }
      }
      
      .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        
        .stat-title {
          font-size: 14px;
          font-weight: 600;
          color: var(--text-secondary);
          margin: 0;
        }
        
        .stat-icon {
          font-size: 20px;
        }
      }
      
      .stat-value {
        font-size: 28px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 15px;
      }
      
      .stat-footer {
        font-size: 13px;
        color: var(--text-light);
        
        .stat-change {
          font-weight: 600;
          
          &.positive {
            color: var(--success-color);
          }
          
          &.negative {
            color: var(--danger-color);
          }
        }
      }
    }
  }
  
  .content-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
  }
  
  .content-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    
    .card-header {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
      }
      
      .btn-text {
        background: none;
        border: none;
        color: var(--primary-color);
        font-size: 14px;
        cursor: pointer;
        padding: 0;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
    
    .card-body {
      padding: 20px;
    }
  }
  
  .quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    
    .quick-action-item {
      background-color: var(--primary-light);
      border-radius: var(--radius-sm);
      padding: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: var(--transition);
      
      &:hover {
        background-color: rgba(58, 124, 254, 0.15);
        transform: translateY(-2px);
      }
      
      .action-icon {
        font-size: 20px;
        color: var(--primary-color);
      }
      
      .action-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
      }
    }
  }
}

/* 用户管理 */
.users-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  
  .search-wrapper {
    flex: 1;
    max-width: 500px;
    
    .search-input {
      position: relative;
      width: 100%;
      
      .search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-light);
        font-size: 16px;
      }
      
      input {
        width: 100%;
        border: 1px solid var(--border-color);
        border-radius: 50px;
        padding: 12px 15px 12px 40px;
        font-size: 14px;
        color: var(--text-primary);
        outline: none;
        transition: var(--transition);
        
        &:focus {
          border-color: var(--primary-color);
          box-shadow: 0 0 0 2px rgba(58, 124, 254, 0.2);
        }
      }
      
      .search-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 8px 20px;
        font-size: 14px;
        cursor: pointer;
        transition: var(--transition);
        
        &:hover {
          background-color: color.adjust(#3a7cfe, $lightness: -10%);
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 10px;
    
    .btn-primary {
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: var(--radius-sm);
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: var(--transition);
      
      &:hover {
        background-color: color.adjust(#3a7cfe, $lightness: -10%);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
      }
    }
  }
}

.table-card {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  
  .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    
    &.status-active {
      background-color: rgba(66, 185, 131, 0.1);
      color: var(--success-color);
    }
    
    &.status-inactive {
      background-color: rgba(245, 108, 108, 0.1);
      color: var(--danger-color);
    }
  }

  /* 角色样式 */
  .role-text {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    
    &.role-1 {
      background-color: #ffd700;
      color: #b8860b;
    }
    
    &.role-2 {
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    &.role-3 {
      background-color: #f6ffed;
      color: #52c41a;
    }
  }
  
  .table-actions {
    display: flex;
    gap: 8px;
    
    .action-btn {
      border: none;
      border-radius: var(--radius-sm);
      padding: 6px 12px;
      font-size: 12px;
      cursor: pointer;
      transition: var(--transition);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
      }
      
      &.btn-success {
        background-color: rgba(66, 185, 131, 0.1);
        color: var(--success-color);
        
        &:hover {
          background-color: var(--success-color);
          color: white;
        }
      }
      
      &.btn-warning {
        background-color: rgba(230, 162, 60, 0.1);
        color: var(--warning-color);
        
        &:hover {
          background-color: var(--warning-color);
          color: white;
        }
      }
      
      &.btn-danger {
        background-color: rgba(245, 108, 108, 0.1);
        color: var(--danger-color);
        
        &:hover {
          background-color: var(--danger-color);
          color: white;
        }
      }
    }
  }
  
  .table-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

/* 知识库管理 */
.knowledge-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.knowledge-form {
  .form-tip {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 5px;
  }
}

.action-cell {
  display: flex;
  gap: 10px;
  justify-content: center;
  
  .btn-text {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    
    &:hover {
      background-color: rgba(58, 124, 254, 0.1);
    }
    
    &.btn-delete {
      color: var(--danger-color);
      
      &:hover {
        background-color: rgba(245, 108, 108, 0.1);
      }
    }
  }
}

/* MCP管理 */
.mcp-content {
  width: 100%;
  background-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
}

/* 智能体角色管理 */
.agent-role-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 模型提供商管理 */
.model-provider-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 加载容器样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  min-height: 300px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #e6e6e6;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>